import React, { forwardRef, useContext } from 'react';
import CustomSelect from 'components/customselect';
import ImageUpload from 'components/imgupload';
import PromptInput from 'components/promptinput';
import classNames from 'classnames';
import { useTranslation } from 'react-i18next';
import useFormStore from 'src/context/usetypeformstore';

const Keyframe2VideoForm = () => {
    const state = useFormStore();
    const { setFormData } = useFormStore();
    const formData = state.keyframe2video;
    const models = state.modellist.keyframe2video;
    const { t, i18n } = useTranslation('home', {
        keyPrefix: 'generateleft',
    });

    const options = models.map((model) => ({
        value: model.id,
        label: model.name,
    }));

    // 查找当前选中的 option
    const selectedOption = options.find(
        (option) => option.value === formData.model
    );

    const handleModelChange = (selectedOption) => {
        setFormData('keyframe2video', {
            ...formData,
            model: selectedOption.value,
        });
    };

    const handleStartImageUpload = (file, url) => {
        setFormData('keyframe2video', {
            ...formData,
            first_frame_url: url,
        });
    };

    const handleEndImageUpload = (file, url) => {
        setFormData('keyframe2video', {
            ...formData,
            last_frame_url: url,
        });
    };

    const handlePromptChange = (e) => {
        setFormData('keyframe2video', {
            ...formData,
            prompts: e.target.value,
        });
    };

    return (
        <div className="keyframe2video-form">
            <div className="form-group">
                <p className="type-selection-title">{t('modeltitle')}</p>
                <CustomSelect
                    options={options}
                    value={selectedOption}
                    onChange={handleModelChange}
                    className="model-select"
                    placeholder="选择模型..."
                />
            </div>
            <div className="form-group">
                <p className="type-selection-title">{t('uploadtitle')}</p>
                <div className="image-upload-container">
                    <ImageUpload
                        onFileChange={handleStartImageUpload}
                        initialImageUrl={formData.first_frame_url}
                        text={'上传首帧图片'}
                    />

                    <ImageUpload
                        onFileChange={handleEndImageUpload}
                        initialImageUrl={formData.last_frame_url}
                        text={'上传尾帧图片'}
                    />
                </div>
            </div>

            <div className="form-group">
                <p className="type-selection-title">{t('prompttitle')}</p>

                <PromptInput
                    value={formData.prompts}
                    onChange={handlePromptChange}
                    placeholder=""
                ></PromptInput>
            </div>
            <div className="form-group">
                <p className="type-selection-title">{t('numtitle')}</p>
                <div className="num-param">
                    {[1, 2, 3, 4].map((item, index) => {
                        return (
                            <div
                                className={classNames('num-item', {
                                    'num-item-active': item === formData.num,
                                })}
                                onClick={() =>
                                    setFormData('keyframe2video', {
                                        ...formData,
                                        num: item,
                                    })
                                }
                                key={index}
                            >
                                <p>{item}</p>
                            </div>
                        );
                    })}
                </div>
            </div>
        </div>
    );
};

export default Keyframe2VideoForm;
